<template>
	<div>
		<Card>
			<div v-show="mirror_show" @click="mirror_show=false" class="back">返回上一级</div>
			<Table :columns="reColumns" :data="reTableData" v-show="!mirror_show"></Table>
			<Table :columns="columns" :data="tableData" v-show="mirror_show"></Table>
			<div class="center" v-show="mirror_show">
				<div class="pageBox">
					<Page :total="count" show-total :page-size="pageSize" @on-change="handlePage" />
				</div>
			</div>
		</Card>
		<!-- 展示面板 -->
		<Modal v-model="modalSelect" :title="title" width="1000" :footer-hide="true">
			<div class="modal-field-con">
				<Table :columns="columns1" :data="mirror_details"></Table>
			</div>
		</Modal>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				modalSelect: false,
				columns: [{
						title: '名称',
						key: 'name'
					},
					{
						title: '标签数',
						key: 'tags_count'
					},
					{
						title: '下载数',
						key: 'pull_count'
					},
					{
						title: '操作',
						key: 'handle',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.title = params.row.name
											this.$api.post(0, '/kuber/imgs/getDetail', {
												pname: this.title
											}, r => {
												this.mirror_details = r.data.data
											})
											this.getUrl()
											this.modalSelect = true
										}
									}
								}, '查看')
							])
						}
					}
				],
				columns1: [{
						title: '版本',
						key: 'name',
						width: '8%'
					},
					{
						title: '大小',
						key: 'size',
						width: '10%',
						render: (h, params) => {
							var size = params.row.size / 1024 / 1024
							return h('span', size.toFixed(2) + 'MB')
						}
					},
					{
						title: '调用地址',
						key: '',
						width: '27%',
						render: (h, params) => {
							return h('span', this.url + '/' + this.title + ':' + params.row.name)
						}
					},
					{
						title: '创建时间',
						key: 'created',
						width: '20%',
						render: (h, params) => {
							var bear = ''
							for (var i = 0; i < 19; i++) {
								bear += params.row.created[i]
							}
							bear = new Date(bear.replace(/-,T,:/g, '/'))
							// 获取年份
							var nian = bear.getFullYear()
							// 获取月
							var yue = bear.getMonth() + 1
							if (yue < 10) {
								yue = '0' + yue
							}
							// 获取几号
							var dd = bear.getDate()
							if (dd < 10) {
								dd = '0' + dd
							}
							// 获取小时
							var hous = bear.getHours()
							if (hous < 10) {
								hous = '0' + hous
							}
							// 获取分钟
							var m = bear.getMinutes()
							if (m < 10) {
								m = '0' + m
							}
							// 获取秒
							var s = bear.getSeconds()
							if (s < 10) {
								s = '0' + s
							}
							var days = nian + '-' + yue + '-' + dd + ' ' + hous + ':' + m + ':' + s
							return h('span', days)
						}
					},
					{
						title: '作者',
						key: 'author',
						width: '20%'
					},
					{
						title: 'docker版本',
						key: 'docker_version',
						width: '15%'
					}
				],
				tableData: [],
				count: 0,
				pageSize: 5,
				page: 1,
				title: '',
				mirror_details: [],
				url: '',
				reColumns: [{
						title: '项目编号',
						key: 'project_id'
					},
					{
						title: '项目名称',
						key: 'name'
					},
					{
						title: '创建时间',
						key: 'creation_time',
						render: (h, params) => {
							var date1 = new Date(params.row.creation_time).toString().replace(/-/g, '/')
							var date2 = new Date(+new Date(date1) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/,
								'')
							return h('span', date2)
						}
					},
					{
						title: '所有者',
						key: 'owner_name'
					},
					{
						title: '访问级别',
						key: 'metadata',
						render: (h, params) => {
							if (params.row.metadata.public === true) {
								return h('span', '公开')
							} else {
								return h('span', '私有')
							}
						}
					},
					{
						title: '操作',
						key: 'handle',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.mirror_show = true
											this.rid = params.row.project_id
											this.getList()
										}
									}
								}, '查看')
							])
						}
					}
				],
				reTableData: [],
				rid: 0,
				mirror_show: false
			}
		},
		methods: {
			// 分页跳转
			handlePage (value) {
				this.page = value
				this.getList()
			},
			// 获取镜像列表
			getList () {
				this.$api.post(0, '/kuber/imgs/getProjectsPage', {
					page: this.page,
					limit: 5,
					rid: this.rid
				}, r => {
					this.tableData = r.data.data
					console.log(r)
					this.count = parseInt(r.data.total)
				})
			},
			// 获取调用地址
			getUrl () {
				this.$api.post(0, '/kuber/imgs/getSystemInfo', {}, r => {
					this.url = r.data.data.registry_url
				})
			}
		},
		mounted () {
			this.$api.post(0, '/kuber/imgs/getRepositories', {}, r => {
				if (r.data.code === 0) {
					this.reTableData = r.data.data
				}
			})
		}
	}
</script>

<style>
	ul.ivu-page {
		margin-top: 20px
	}

	table {
		width: 100% !important
	}

	div.back {
		margin-bottom: 30px;
		cursor: pointer;
	}
</style>
